<template>
	<view>
		<view class="detail-header">
			<view @click="headerHandler(1)" class="detail-header-item"
				:class="{'detail-header-item-active':activeHeader==1?true:false}">
				最近七天
			</view>
			<view @click="headerHandler(2)" class="detail-header-item"
				:class="{'detail-header-item-active':activeHeader==2?true:false}">
				最近三十天
			</view>
			<view @click="headerHandler(3)" class="detail-header-item"
				:class="{'detail-header-item-active':activeHeader==3?true:false}">
				最近两个月
			</view>
		</view>
		<view class="detail-data">
			<view class="" style="padding-right: 20px;">
				<view class="">
					时间区间
				</view>
				<view class="" style="">
					{{date}}
				</view>
			</view>
			<view class="detail-data-line">
			</view>
			<view class="" style="width: 50%;">
				<view class="">
					{{computeText()}}
				</view>
				<view class="">
					{{computeTotal()}}次
				</view>
			</view>
		</view>
		<view class="table-content">
			<view class="table-th">
				<view class="table-th-text">
					序号
				</view>
				<view class="table-th-text">
					{{computeText()}}
				</view>
				<view class="table-th-text">
					日期
				</view>
			</view>
			<view class="table-tr" :key="index" v-for="(item,index) in filterData">
				<view class="table-th-text">
					{{index+1}}
				</view>
				<view class="table-th-text">
					{{item.num}}
				</view>
				<view class="table-th-text">
					{{item.date}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDataStatisticList
	} from "@/api/user.js"
	export default {
		data() {
			return {
				date: "",
				userData: null,
				type: 1,
				state: 1,
				activeHeader: 1,
				pageNum: 15,
				page: 1,
				filterData: [],
				groundData: {}
			}
		},
		methods: {
			computeText: function() {
				var text = ""
				switch (this.type) {
					case '1':
						text = '车源点击量'
						break;
					case '2':
						text = '电话访问量'
						break;
					case '3':
						text = '在售车源量'
						break;
					case '4':
						text = '主页访问量'
						break;
					case '5':
						text = '车源关注量'
						break;
					case '6':
						text = '车源曝光量'
						break;
				}
				return text
			},
			computeTotal(){
				let total = 0
				if(this.activeHeader == 1){
					total = this.groundData.data7.num
				}else if(this.activeHeader == 2){
					total = this.groundData.data30.num
				}else if(this.activeHeader == 3){
					total = this.groundData.data60.num
				}
				return total
			},
			headerHandler: function(num) {
				this.activeHeader = num;
				this.state=num;
				this.getData()
			},
			getData: function() {
				this.filterData = []
				getDataStatisticList(this.userData.id, this.type, this.state, this.pageNum, this.page).then(res => {
					console.log("1111111", res);
					// 1:车源点击量 2:电话访问量3:在售车源量4:主页访问量5:最近关注量6:车源曝光量
					res.data.data.forEach(item => {
						const obj = {
							date: item.time
						}
						obj.num = item.num
				
						this.filterData.push(obj)
					})
				})
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: "数据详情"
			})
			uni.setNavigationBarColor({
				frontColor: '#000',
				backgroundColor: '#fff',
			})
			
		},
		onLoad(option) {
			console.log("optiopn===", option);
			this.state = option.state
			this.type = option.active
			this.date = option.date
			this.activeHeader = option.state
			this.groundData = JSON.parse(option.groundData)
			console.log(this.groundData)
			const userData = uni.getStorageSync("login")
			this.userData = userData
			if (userData) {
				this.getData();
			}

		}
	}
</script>

<style scoped lang="scss">
	.detail-header {
		background-color: #fff;
		height: 45px;
		display: flex;
		align-items: center;
		font-size: 12px;

		&-item {
			background-color: #F7F8FA;
			color: #000;
			padding: 5px 15px;
			border-radius: 12px;
			margin: 0 5px;

			&-active {
				background-color: #0E59EA;
				color: #fff;
			}
		}
	}

	.detail-data {
		background-color: #2D56C5;
		height: 120px;
		width: 95%;
		margin: 0 auto;
		color: #fff;
		font-size: 14px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0 50px;
		text-align: center;
		line-height: 25px;
		&-line {
			border: 1px solid #fff;
			height: 60px;
		}
	}

	.table-content {
		margin-top: 20px;
	}

	.table-th {
		background-color: #2D56C5;
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 95%;
		margin: 0 auto;
		height: 35px;
		border-radius: 5px;
		font-size: 12px;
		margin-bottom: 5px;

		&-text {
			flex: 1;
			text-align: center;
		}
	}

	.table-tr {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 35px;
		background-color: #fff;
	}

	.table-tr:nth-child(odd) {
		background-color: #E0E6F7;
	}
</style>